<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 审核任务
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
				<el-select filterable clearable v-model="type" placeholder="请选择修改类型">
					<el-option :label="item.label" :value="item.value" v-for="(item, index) in typeData"></el-option>
				</el-select>
                <el-input v-model="keyword" clearable placeholder="户主|id|电话|身份证号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
				<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="type" label="操作类型">
					<template slot-scope="scope">
						<span>{{typeLabel(scope.row.type)}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="query" label="修改内容">
					<template slot-scope="scope">
						<el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable(scope.row.query,scope.row.type)">查看</el-button>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="状态">
					<template slot-scope="scope">
						<span>{{scope.row.status==0?'已提交':scope.row.status==1?'已通过':'已拒绝'}}</span>
					</template>
				</el-table-column>
                <el-table-column prop="addtime" width="160" label="添加时间"></el-table-column>
				<el-table-column prop="uptime" width="160" label="更新时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
						<el-popconfirm
							confirm-button-text='确定'
							cancel-button-text='取消'
							icon="el-icon-info"
							@confirm="editTask(scope.row.id,1)"
							title="确定通过该信息？"
							v-if="scope.row.status==0"
						>
							<el-button slot="reference" type="text" style="margin-right: 10px;"  :id="'yes' + scope.row.id">通过</el-button>
						</el-popconfirm>
						<el-popconfirm
							confirm-button-text='确定'
							cancel-button-text='取消'
							icon="el-icon-info"
							icon-color="red"
							@confirm="editTask(scope.row.id,2)"
							title="确定拒绝该信息？"
							v-if="scope.row.status==0"
						>
							<el-button slot="reference" type="text" style="margin-right: 10px;"  :id="'no' + scope.row.id" class="red">拒绝</el-button>
						</el-popconfirm>
                        <el-popconfirm
                        	confirm-button-text='确定'
                        	cancel-button-text='取消'
                        	icon="el-icon-info"
                        	icon-color="red"
                        	@confirm="delRow(scope.row.id)"
                        	title="确定删除该信息？"
                        >
                        	<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="pagination"
                ></el-pagination>
            </div>
        </div>
		<el-dialog title="审批内容" :visible.sync="dialog" width="40%">
			<div v-if="selectType==2">
				<div v-for="(item,index) in query" :key="index" class="query_list" v-if="item.value!=oldHomeData[item.key]">
					<span >{{keyData[item.key]}}:</span>
					<span style="margin-left: 10px;">{{oldHomeData[item.key]||'无'}}</span>
					<span style="margin-left: 10px;">>>>></span>
					<span style="margin-left: 10px;">{{item.value||'无'}}</span>
				</div>
			</div>
			<div v-else-if="selectType==3">
				<div v-for="(item,key,index) in oldHomeData" :key="index" class="query_list" v-if="keyData[key]">
					<span>{{keyData[key]}}:</span>
					<span style="margin-left: 10px;">{{item||'/'}}</span>
				</div>
			</div>
			<div v-else>
				<div v-for="(item,index) in query" :key="index" class="query_list" v-if="keyData[item.key]">
					<span>{{keyData[item.key]}}:</span>
					<span style="margin-left: 10px;">{{item.value||'/'}}</span>
				</div>
			</div>
		</el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Log',
    data() {
        return {
            type: '',
			keyword:'',
            tableData: [],
            dialog: false,
			delIds: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
			typeData:[{
				label:'新增',
				value:1
			},
			{
				label:'修改',
				value:2
			},
			{
				label:'删除',
				value:3
			},
			{
				label:'批量删除',
				value:4
			}],
			query:[],
			oldHomeData:{},
			selectType:0,
			keyData:{
				sn:'编号',
				hamletid:'村级ID',
				group:'组别',
				header:'户主姓名',
				sex:'性别',
				phone:'手机号',
				idcard:'身份证号',
				person:'家庭成员',
				responsible:'责任人',
				position:'责任人职务',
				resphone:'责任人电话',
				cate:'家庭类别',
				water:'饮水类型',
				income:'收入情况',
				addr:'现居住地',
				status:'状态',
				addtime:'添加时间',
				id:'户档ID',
				ids:'户档ID'
			}
        };
    },
    created() {
		this.getData()
    },
    methods: {
        getData() {
			let t = this
			t.$apiPost('Task/lists', {type: this.type,keyword:this.keyword, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },   
		editTable(query,type){
			this.query = []
			this.oldHomeData = []
			this.selectType = type
			for(let item in query){
				if((type==2||type==3)&&item=='id'){
					this.getHome(query[item])
				}
				if(item!='approval') this.query.push({key:item,value:query[item]})
			}
			this.dialog = true
		},
		getHome (id) {
			this.$apiPost('Home/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.oldHomeData = res.data
				}
			})
		},
		editTask(id,status){
			this.$apiPost('Task/editData', {id: id,status:status}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getData()
					this.$message.success(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		handleQuery () {
			this.pageIndex = 1
			this.getData()
		},
		delRow (id) {
			this.$apiPost('Task/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getData()
					this.$message(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		tablesLable(table){
			if(!table) return ''
			let tab = this.tables.find(item=>item.value==table)
			if(tab){
				return tab.label+'('+tab.value+')'
			}else{
				return ''
			}
		},
		typeLabel(type){
			if(!type) return ''
			let tab = this.typeData.find(item=>item.value==type)
			if(tab){
				return tab.label
			}else{
				return ''
			}
		},
		selectionChange(e){
			let ids = []
			if(e.length > 0) {
				for(let i in e){
					ids.push(e[i].id)
				}
				this.delIds = ids
			} else {
				this.delIds = e
			}
		},
		delAll () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('Task/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getData()
						this.$message(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		pagination (e) {
			this.pageIndex = e
			this.getData()
		}
    }
};
</script>
<style scoped>
.query_list{
	margin-bottom: 10px;
	margin-left:20px;
	font-size: 15px;
}
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
	margin-left: 20px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
